import React, { Component } from 'react'
import {
  BrowserRouter as Router,
  Link,
  Route,
  Redirect,
  Switch,
  useLocation
} from 'react-router-dom'
import Movie from './Movie'
import Performance from './Performance'

const ShortVedio=()=>{
  let params = new URLSearchParams(useLocation().search);
  console.log(params.get('city'))

  return (
    <h1>短视频</h1>
  )
}


export default class Index extends Component {
  render() {
    return (

      <>
        <Router>
          <div>
            <Link to="/">首页</Link>
            <Link to="/movie">电影</Link>
            <Link to="/shortVideo">小视频</Link>
            <Link to="/performance/666">演出</Link>
            <Link to="/api/abc">404页面</Link>
          </div>

          {/* 排它性 */}
          <div style={{"width":"300px","height":"400px","background":"#efefef"}}>
          <Switch>
          

            <Route path="/movie">
              <Movie></Movie>
            </Route>

            <Route path="/shortVideo" component={ShortVedio}>
             
            </Route>

            <Route path="/performance/:id" component={Performance}>
            </Route>

            {/* <Route path="/:id">
              <h1>带参数</h1>
            </Route> */}
            <Redirect exact={true} from="/" to="/shortVideo?city=太原&id=100"></Redirect>
           
            <Route path="*">
              <h1>404页面</h1>
            </Route>

          </Switch>
          </div>
        </Router>


      </>
    )
  }
}
